<script setup lang="ts">
import Request from '@/api/axios';
import dayjs from 'dayjs';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const uid = route.query.uid;
onMounted(async ()=>{
    await Request.get({url: `/record/user/${uid}`}).then(res => {
        records.value = res.info
    })
})
const records = ref([])
const columns = [
    {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
    },
    {
        title: 'Problem',
        dataIndex: 'problem_title',
        key: 'problem_title',
    },
    {
        title: 'Verdict',
        dataIndex:'verdict',
        key:'verdict',
    },
    {
        title: 'Time',
        dataIndex: 'created_at',
        key: 'created_at',
    },
    {
        title : 'Resourses',
        key : 'resourses'
    },{
        title : "Language",
        dataIndex : "language",
        key : "language"
    }
]
</script>
<template>
<a-table :columns="columns" :data-source="records" >
    <template #bodyCell="{ column,record }">
        <template v-if="column.key === 'id'">
            <a-button type="link" @click="$router.push({name : 'record', params : { id : record.id }})">{{ record.id }}</a-button>
        </template>
        <template v-if="column.key === 'problem_title'">
            <a-button type="link" @click="$router.push({name : 'problem', params : { id : record.problem_id }})">{{ record.problem_title }}</a-button>
        </template>
        <template v-if="column.key ==='verdict'">
            {{ record.verdict }}
        </template>
        <template v-if="column.key === 'created_at'">
            {{ dayjs(record.created_at).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
        <template v-if="column.key === 'resourses'">
            {{ record.max_memory / 1024 }} MB, {{ record.max_time }} ms
        </template>
    </template>
</a-table>
</template>